<template>
    <div class="layout">
        <div class="qwfirend-container container">
            <div class="qwfirend-list-title">
                <img class="qwfirend-list-title-icon" src="@/assets/customer/warn.png" alt="" />
                <div class="qwfirend-list-title-text">
                    温馨提示：一个客户每天只能看到同一个成员发表的3条朋友圈，请合理使用发表次数。具体可查看企业微信官方说明
                    <span @click="toQwExplainLink">《客户朋友圈可展示客户限制》</span>
                </div>
            </div>
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
            <div class="qwfirend-container-bottom container_right">
                <ZwTable
                    ref="tableRef"
                    tab-h="initial"
                    loading
                    :option="tableOption"
                    :fetch-params="state.searchParams"
                    :fetch-api="massList">
                    <template #headerOperate>
                        <el-button v-auth="'CIRCLE_QW2'" type="primary" @click="createMoments">发布朋友圈</el-button>
                    </template>
                </ZwTable>
            </div>
        </div>
    </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'QW_FRI_CRICLE' });
</script>

<script setup lang="tsx">
import { ref, reactive, onActivated, computed, markRaw } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { WarningFilled } from '@element-plus/icons-vue';

import ZwSearchForm from '@/components/zw/search-form1.0/SearchForm';
import ZwTable from '@/components/zw/table1.0/Table';
import { massList, messRemind, delFriend, endFriend } from '@/api/friendcircle';
import { deepCopy } from '@/utils/helper';

import { qwFirendSearchOption } from './configuration/searchOption';
import { qwFirendtableOption, ENDED } from './configuration/tableOption';

const router = useRouter();

/* ----------------------------搜索表单-start---------------------------- */
/** 搜索列配置项 */
const searchOption = computed(() => {
    return qwFirendSearchOption;
});

const defaultParams = {
    title: '', // 任务名称
    created_uid: [], //创建人id
    status: '', // 任务状态
    created_at: [] //下发时间
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});

/* ----------------------------搜索表单-end---------------------------- */

/* ----------------------------表格配置-start---------------------------- */

const currentParams = ref<any>(null);
const tableRef = ref<any>(null);

const search = (v: any) => {
    currentParams.value = v;
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
    currentParams.value = null;
};

onActivated((val: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});

/**
 * 二次确认弹窗
 * @param option 弹窗配置
 * @param option.title 弹窗标题
 * @param option.content 弹窗主文本
 * @param option.desc 弹窗文本描述
 */
const withConfirmMessageBox = (option: { title: string; content: string; desc: string }) => {
    // eslint-disable-next-line no-async-promise-executor
    return new Promise(async (resolve, reject) => {
        try {
            await ElMessageBox({
                customClass: `zw-table-confirm-messagebox ${!option.desc ? 'center' : ''}`,
                type: 'warning',
                title: option.title,
                message: (
                    <div>
                        <h4 class="qwfriend-confirm-content">{option.content}</h4>
                        {option.desc && <div class="qwfriend-confirm-desc">{option.desc}</div>}
                    </div>
                ) as any,
                icon: markRaw(WarningFilled),
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确定'
            });
            resolve(true);
        } catch (err) {
            reject(err);
        }
    });
};

/** 表格列配置项 */
const tableOption = qwFirendtableOption({
    /** 详情 */
    detail: row => {
        router.push({
            path: '/channel/friendcircle/qwFriendCricle/releasefriend',
            query: { id: row.id, type: 'look' }
        });
    },
    /** 编辑 */
    edit: row => {
        router.push({
            path: '/channel/friendcircle/qwFriendCricle/releasefriend',
            query: { id: row.id, type: 'edit' }
        });
    },
    /** 统计 */
    stat: row => {
        // 统计的路由后面补充上
        router.push({
            path: '/channel/friendcircle/qwFriendCricle/friendDetail',
            query: { id: row.id }
        });
    },
    /** 复制 */
    copy: row => {
        router.push({
            path: '/channel/friendcircle/qwFriendCricle/releasefriend',
            query: { id: row.id, type: 'copy' }
        });
    },
    /** 删除 */
    delete: async row => {
        await withConfirmMessageBox({
            title: '删除提醒',
            content: `你确定要删除【${row.title || '--'}】朋友圈任务吗？`,
            desc:
                // 非已结束并且有未发送成员的的情况下删除
                !ENDED.includes(row.sync_wx_status) && row.work_user_not_send_num
                    ? '当前朋友圈任务尚未下发，删除后该朋友圈任务不再下发。'
                    : ''
        });
        await delFriend({ send_moment_id: row.id });
        ElMessage.success('删除成功');
        tableRef.value.reload();
    },
    /** 结束 */
    end: async row => {
        await withConfirmMessageBox({
            title: '结束提醒',
            content: `你确定要结束【${row.title || '--'}】朋友圈任务吗？`,
            desc: '结束后，未发表的成员将无法再发表该朋友圈。'
        });
        await endFriend({ send_moment_id: row.id });
        ElMessage.success('结束成功');
        tableRef.value.reload();
    },
    /** 一键提醒 */
    remind: async row => {
        const params = {
            send_moment_id: row.id
        };
        await messRemind(params);
        ElMessage.success('一键提醒成功');
    }
});
/* ----------------------------表格配置-end---------------------------- */

/**
 * 发布朋友圈
 */
const createMoments = () => {
    router.push({ path: '/channel/friendcircle/qwFriendCricle/releasefriend', query: { type: 'new' } });
};

/**
 * 前往企业微信发表客户朋友圈说明文档
 */
const toQwExplainLink = () => {
    let a: HTMLAnchorElement | null = document.createElement('a');
    a.href =
        'https://open.work.weixin.qq.com/help2/pc/14767#三、客户朋友圈可展示客户限制/发送朋友圈提示“当前没有满足发表条件的客户”';
    a.target = '_blank';
    a.click();
    a = null;
};
</script>

<style lang="scss" scoped>
@import './style/index';
</style>
